<template>
	<view id="orderList">
		<Header txt="订单" v-if="baidu"></Header>
		<HeaderB txt="订单" v-if="!baidu"></HeaderB>
		<!-- 添加备注 -->
		<uni-popup ref="popup" type="bottom" background-color="#FFFFFF" class="dislog">
			<view class="tit">
				<view class="top">
					<view class="txt">备注：</view>
					<input type="text" value="" v-model="remark" placeholder="请输入订单备注" @input="input" @focus="input2" />
					<text @click="clear" v-if="isRemark" class="inputNo">X</text>
				</view>
				<button type="primary" @click="addOrUpdUserOrderRemark">添加备注</button>
			</view>
		</uni-popup>
		<!-- 更换城市 -->
		<uni-popup ref="popup4" type="bottom" background-color="#FFFFFF" class="dislog">
			<view class="tit4">
				<view class="top">
					<view class="txt">开通城市：</view>
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="city">
							<view class="content">{{array[index].city}}</view>			
					</picker>
				</view>
				<button type="primary" >修改</button>
			</view>
		</uni-popup>
		<!-- 修改密码 -->
		<uni-popup ref="popup3" type="bottom" background-color="#FFFFFF" class="dislog">
			<view class="tit3">
				<view class="top">
					<view class="txt">用户名：</view>
					<input type="text" value="" v-model="account" placeholder="请输入新的用户名"  />
					<view class="txt">密码：</view>
					<input type="text" value="" v-model="password" placeholder="请输入新的密码"  />
				</view>
				<button type="primary" @click="updateCxAccount">修改</button>
			</view>
		</uni-popup>
		<!-- 余量 -->
		<uni-popup ref="popup5" type="top" background-color="#FFFFFF" class="dislog dislog2">
			<view class="tit2">
				<view class="top">
					<view class="txt txtY">订单余量：</view>
					<view class="txt2 txtX">该订单剩余可用{{yuData}}</view>
				</view>
				<button type="primary" @click="close2">确定</button>
			</view>
		</uni-popup>
		<!-- 三点弹窗 -->
		<uni-popup ref="popup2" type="bottom" background-color="#FFFFFF" class="dislog">
			<view class="tit2">
				<!-- <view class="cont1" v-show="this.type == 7">更新IP</view> -->
				<view class="cont1" v-if="type == 7" @click="getCxAccount">修改密码</view>
				<!-- <view class="cont1" v-show="this.type == 7"  @click="changeCity">更换城市</view> -->
				<view class="cont1" @click="remain"  v-if="
					type != 3 &&type != 5 &&type != 7 &&type != 8 &&
					type != 12 &&
					type != 13 &&
					type != 10 &&
					type != 14 &&
					type != 17">
					查询余量
				</view>
				<view class="cont1" @click="open3">添加备注</view>
				<view class="cont1">删除</view>				
			</view>
		</uni-popup>
		<view class="" v-if="no">
			<view  v-for="(item, index) in dataList" :key="index" class="order_list ">
				<view class="about">
					<text class="item" v-if="item.type == 1">高效代理按量</text>
					<text class="item" v-if="item.type == 2">免费试用</text>
					<text class="item" v-if="item.type == 3 && item.poolType == 1">高效不限量个人</text>
					<text class="item" v-if="item.type == 3 && item.poolType == 2">高效不限量企业</text>
					<text class="item" v-if="item.type == 3 && item.poolType == 3">高效不限量极速</text>
					<text class="item" v-if="item.type == 4 && item.poolType == 1">动态代理</text>
					<text class="item" v-if="item.type == 4 && item.poolType == 2">动态代理</text>
					<text class="item" v-if="item.type == 5">独享代理</text>
					<text class="item" v-if="item.type == 6">定制代理</text>
					<text class="item" v-if="item.type == 7 && item.poolType == 1">长效IP(24小时)</text>
					<text class="item" v-if="item.type == 7 && item.poolType == 2">长效IP(静态IP)</text>
					<text class="item" v-if="item.type == 8">动态(按并发)</text>
					<text class="item" v-if="item.type == 4">动态(按量包时)</text>
					<text class="item" v-if="item.type == 10">定制独享</text>
					<text class="item" v-if="item.type == 11">虚拟代理</text>
					<text class="item"  v-if="item.type == 12">全局代理</text>
					<text class="item"  v-if="item.type == 13">新定制代理</text>
					<text class="item" v-if="item.type == 14">加速器</text>
					<text class="item" v-if="item.type == 15">包量套餐(升级版)</text>
					<text class="item" v-if="item.type == 17">专属定制</text>
				</view>
				
				<view  class="bg">
					<view class="orderNo">
						<!-- <image src="../../static/other/order2.png" mode=""></image> -->
						{{item.orderNo}}
					</view>
					<view class="time" style="color: #007AFF;" v-if="item.date!='已过期'">
						{{item.date}}
					</view>
					<view class="time" v-if="item.date=='已过期'">
						{{item.date}}
					</view>
				</view>
				<view class="other">	
					<view class="more" @click="open2(item)">
						<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E7%94%A8%E6%88%B7/deng.png" mode="aspectFit"></image>
					</view>	
					<button type="default" @click="goPage2(item)" v-if="
						(item.type != 2 &&item.type != 6 &&item.type != 13 &&item.type != 10) ||
						(item.type != 2 && item.type == 6 && item.dzRenew == 1) ||
						(item.type != 2 && item.type == 10 && item.dzRenew == 1) ||
						(item.type != 2 && item.type == 13 && item.dzRenew == 1)">
						续费
					</button>
					<!-- <button type="default" v-if="item.type == 14 && item.date != '已过期'">
						升级
					</button> -->
					<!-- <button type="default" v-show="item.type == 7">
						详细信息
					</button> -->
					<button @click="goPage" type="default" v-show="
						item.type != 4 &&item.type != 8 &&item.type != 9 &&item.type != 10 &&item.type != 12 &&item.type != 14 &&item.type != 17">
						生成API
					</button>
					<button type="default" @click="open(item)" v-show="item.remark != null">
						查看备注
					</button>
					
				</view>
			</view>
		</view>
		<view class="no" v-if="!no">
			<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E6%97%A0%E8%AE%A2%E5%8D%95.png" mode="aspectFit"></image>
			<view class="text">
				暂无订单
			</view>
		</view>	
	</view>
</template>

<script>
	import {formatDate2} from "../../common/com.js"
	export default {
		data() {
			return {
				dataList:[],
				pageNum:1,
				remark:'',
				isRemark:false,
				orderNo:'',
				type:'',
				account:'',
				password:'',
				array: [{city:""}],
				index:0,
				yuData:'',
				baidu:true,
				no:true
			};
		},
		onShow() {
			this.orderList()
			this.listCxCity()
			// #ifdef MP-BAIDU
			this.baidu=false
			// #endif
		},
		onReachBottom(){
			this.orderList()
		},
		methods:{
			remain(){
				let orderNo = this.orderNo;
				let type = this.type;
				let that = this;
				let params = { type: type, orderNo: orderNo };
				that.$store
					.dispatch("LeftCount",params)
					.then((response) => {						
						console.log(response.data.obj);
						this.yuData=response.data.obj
						this.$refs.popup5.open('middle')
					})
					this.$refs.popup2.close()
			},
			goPage(){
				uni.switchTab({
					url: "/pages/getIp/getIp"
				})
			},
			goPage2(item) {
				this.$store.commit("SET_ORDERRE", item);
			      uni.navigateTo({
					  url:'/pagesA/buy/orderPay'
					  })
			    },
			listCxCity(){
				let that =this
				that.$store
					.dispatch("ListCxCity",{})
					.then((response) => {						
						if(response.data.code==0){
							this.array=response.data.obj
							this.array.unshift({city:"随机分配"})
						}
					})
			},
			bindPickerChange(e) {		//改变的事件名
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.detail.value;
			},
			clear(){
				this.remark=''
				this.isRemark=false
			},
			changeCity(){
				this.$refs.popup2.close()
				this.$refs.popup4.open('top')
			},
			// 修改订单密码，获取信息
			getCxAccount(){
				this.$refs.popup2.close()
				this.$refs.popup3.open('top')
				let that =this
				that.$store
					.dispatch("GetCxAccount",{orderNo:this.orderNo})
					.then((response) => {
						if(response.data.code==0){
							this.account=response.data.obj.account
							this.password=response.data.obj.password						
						}
					})
			},
			// 修改订单用户名密码
			updateCxAccount(){
				let that =this
				that.$store
					.dispatch("UpdateCxAccount",{orderNo:this.orderNo,account:this.account,password:this.password})
					.then((response) => {
						if(response.data.code==0){
							uni.showToast({
								title:"修改密码成功,请重新去API接口提取"
							})
							that.$refs.popup3.close()
						}					
					})
			},
			input(){			
				if(this.remark==''||this.remark==null){
					this.isRemark=false
				}else{
					this.isRemark=true
				}
			},
			input2(){
				this.isRemark=true
			},
			open(item){			
				this.remark=item.remark
				this.orderNo=item.orderNo
			    this.$refs.popup.open('top')
			},
			open2(item){			
				this.type=item.type
				this.remark=item.remark
				this.orderNo=item.orderNo
			    this.$refs.popup2.open('top')
			},
			open3(){
				this.$refs.popup2.close()
				this.$refs.popup.open('top')
			},
			close() {
			    this.$refs.popup.close()
			},
			close2() {
			    this.$refs.popup5.close()
			},
			// 修改备注
			addOrUpdUserOrderRemark(){
				let that=this
				that.$store
					.dispatch("AddOrUpdUserOrderRemark",{orderNo:this.orderNo,remark:this.remark})
					.then((response) => {
						if(response.data.code==0){
							uni.showToast({
							    title:"订单备注添加成功"
							})					
							uni.navigateTo({
								url: "/pages/user/orderList"
							})
						}
					})
			},
			orderList(){
				let that = this;
					this.$store
					.dispatch("OrderList",{pageNum:this.pageNum})
					.then((response) => {
						if(response.data.code==0){
							let tar=response.data.obj.order
							 tar.forEach((item) => {
							            if (item.endTime == null) {
							              item.date = "长期有效";
							              item.types = 1;
							            } else if (item.endTime > new Date().getTime()) {
							              item.date = formatDate2(item.endTime, 2);
							              item.types = 1;
							            } else {
							              item.date = "已过期";
							              item.types = 0;
							            }
							          });
							that.dataList=[...that.dataList, ...tar];
							that.pageNum++;
							this.no=true
						}else{
							this.no=false
						}
					})
					.catch(() => {});
			}
		}
	}
</script>

<style lang="less">
	#orderList{
		padding: 0rpx 20rpx 20rpx;
		background: #F5F5F5;
		overflow: hidden;
		height: 100%;
		.no{
			padding-bottom: 85%;
			padding-top: 45%;
			width: 100%;
			height: 100%;
			text-align: center;
			image{
				width: 280rpx;
				height: 200rpx;
			}
			.text{
				margin-top:10rpx;
				height: 32rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				line-height: 32rpx;
			}
		}
		button::after{
			border:none;
		}	
		.uni-popup__wrapper-box{
			height: 400rpx;
			background:#FFFFFF;
			overflow: hidden;
			.tit2{
				width: 90% !important;
				background: #FFFFFF;
				margin: 0 auto;
				border-radius: 40rpx;
				padding-bottom: 100rpx;
				margin-bottom: 10rpx;
				.cont1{
					color: #486ef4;
					font-size: 24rpx !important;
					width: 100%;
					height: 96rpx;
					line-height: 96rpx;
					border-bottom: 2rpx solid #f3f3f3;
				}
			}
			.tit{
				padding: 50rpx 40rpx 300rpx;
				background: #FFFFFF;
				
			}
			.txt{
				text-align: center;
				float: left;
				display: inline-block;
				width: 140rpx;
				height: 60rpx;	
				font-size: 34rpx;
				line-height: 60rpx;
			}
			.txtY{
				font-size: 36rpx;
				width: 200rpx;
				color: #303133;
			}
			.txtX{
				color: #606266;
				font-size: 36rpx;
				text-align: left;
			}
			.top{
				width: 100%;
				height: 60rpx;
				text-align: left;
				position: relative;
				margin-bottom: 100rpx;
			}
			.inputNo{
				display: inline-block;
				width: 24rpx;
				height: 24rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 24rpx;
				background: #999999;
				border-radius: 50%;
				color: #FFFFFF;
				position: absolute;
				top: 18rpx;
				right: 60rpx;
			}
			input{
				display: inline-block;
				width: 75%;
				height: 60rpx;
				line-height: 60rpx;
			}
			button{
				margin-top: 20rpx;
			}
			.tit3{
				padding: 50rpx 40rpx 300rpx;
				background: #FFFFFF;
				.txt{
					text-align: left;
				}
			}
			.tit4{
				padding: 50rpx 40rpx 300rpx;
				background: #FFFFFF;
				.txt{
					width: 120rpx;
				}
				.content{
					color: #007AFF;
					height: 60rpx;
					line-height: 60rpx;
				}
			}
		}
		.dislog2{
			margin-top: 50%;
			.uni-popup__wrapper-box{
				.top{
					margin-bottom: 60rpx;
				}
				.tit2{
					width: 80%;
					height: 200rpx;
					border-radius: 10rpx;
					padding: 30rpx;
					padding-bottom: 10rpx;
				}
				.txt{
					width: 200rpx;
					font-size: 36rpx;
					text-align: left;
					color: #303133;
					float: none;
				}
				.txt2{
					color: #606266;
					font-size: 28rpx !important;
				}
				button{
					width: 20% !important;
					font-size: 24rpx;
					border-radius: 6rpx;
					margin-left: 80%;
				}
			}
		}
		.bottom{
			width: 80%;
			text-align: center;
			margin: 0 auto;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			color: #777;
			font-size: 24rpx;
		}
		.order_list{
			background: #fff;
			margin: 20rpx 24rpx 28rpx;
			padding: 20rpx 20rpx 0;
			border-radius: 40rpx;
			.about{
				display: inline-block;
				width: 100%;
				border-bottom: 2rpx solid #ccc;
				padding-bottom: 20rpx;
				color: #222222;
				font-weight: bold;
				font-size: 28rpx;
			}
			.bg{
				height: 196rpx;
				border-bottom: 2rpx solid #ccc;
				background: url('https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E7%94%A8%E6%88%B7/%E8%AE%A2%E5%8D%95order2.png') no-repeat 0.12rem center #fff;
				background-size: 96rpx;
				padding: 30rpx 0 0 124rpx;
				border-radius: 6rpx;
				position: relative;
				.orderNo{
					padding-top: 34rpx;
					margin-bottom: 10rpx;
				}
				.time{
					color: #999;
					font-size: 24rpx;
				}
			}
			.other{
				height: 100rpx;
				button{
					width: 130rpx;
					height: 56rpx;
					border: 2rpx solid #dedede;
					border-radius: 54rpx;
					color: #222222;
					padding: 0;
					text-align: center;
					line-height: 56rpx;
					float: right;
					font-size: 24rpx;
					margin-top:24rpx;
					margin-right: 10rpx;
				}
				.more{
					float: right;
					display: inline-block;
					width: 54rpx;
					height: 54rpx;
					margin-top:24rpx;									
				}
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
